<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>对props进行限制</title>
		<!-- 引入react核心库 -->
		<script type="text/javascript" src="../js/react.js"></script>
		<!-- 引入react-dom，用于支持react操作DOM -->
		<script type="text/javascript" src="../js/react-dom.js"></script>
		<!-- 引入babel，用于解析jsx为js -->
		<script type="text/javascript" src="../js/babel.min.js"></script>
		<!-- 引入prop-types，用于限制props -->
		<script type="text/javascript" src="../js/prop-types.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器 -->
		<div id="root"></div>
		<div id="root2"></div>

		<script type="text/babel">
			//定义一个Person组件
			class Person extends React.Component{
				render(){
					console.log('render',this)
					const {name,age,sex,speak} = this.props
					console.log(speak)
					return (
						<ul>
							<li>姓名：{name}</li>	
							<li>年龄：{age+1}</li>	
							<li>性别：{sex}</li>	
							<button onClick={speak}>点我测试一下speak</button>
						</ul>
					)
				}
			}
			
			//对传入的prop进行数据类型的限制、必要性的限制
			Person.propTypes = {
				name:PropTypes.string.isRequired,
				age:PropTypes.number,
				sex:PropTypes.string,
				// speak:PropTypes.func //注意：限制函数类型不要写function，要写func
			}

			//设置prop的默认值
			Person.defaultProps = {
				sex:'不男不女'
			}


			//准备好一个人的数据
			let p = {
				name:'老刘',
				age:18,
				sex:'男',
			}
			function speak() {
				console.log('巴拉巴拉~~~')
			}
			//渲染组件到页面
			ReactDOM.render(<Person {...p}/>,document.getElementById('root'))
			ReactDOM.render(<Person name="佩奇" age={17} speak={speak} />,document.getElementById('root2'))
		</script>
	</body>
</html>